<template>
	<view class="goods-box x-start" @tap="click"> 
	
		<view class="goods__tag" v-if="type">
			<image class="tag-img" :src="tagMap[type]" mode=""></image>
		</view>
	
		<view class="goods__next" v-if="is_next_day_delivery==1">
			<image class="next-img" :src="$IMG_URL + '/goods/day5.png'" mode=""></image>
		</view>
		<image class="goods-img" :src="image" mode="aspectFill"></image>
		<view class="y-start">
			<view class="goods-title more-t">
				<slot name="title">
					<!-- <text v-if="is_next_day_delivery == 1" style="color: #f5a623;">[次日达] </text> -->
					{{ title }}
				</slot>
			</view>
			<view v-if="subtitle" class="describe-text">{{ subtitle }}</view>
			<slot name="describe">
				<view class="mb20">
					<view v-if="describe" class="describe-text">规格：{{ describe }};</view>
					<view v-if="number" class="describe-text">数量：x{{ number }}</view>
				</view>

			</slot>
			<slot name="cardBottom">
				<view class="price">{{ price }}</view>
			</slot>
		</view>
	</view>
	</view>
</template>

<script>
	/**
	 * 商品小卡片
	 * @property {String} title - 标题
	 * @property {String} subtitle - 副标题
	 * @property {String} image - 图片地址
	 * @property {String} describe - 描述信息
	 * @property {String | Number} price - 价格
	 * @property {String} type - 商品类型
	 *  @property {Number} number - 商品数量
	 * @event {Function} click - 点击卡片
	 */
	export default {
		components: {},
		data() {
			return {
				tagMap: {
					seckill: this.$IMG_URL + 'ill_tag.png'
				}
			};
		},
		props: {
			image: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			subtitle: {
				type: String,
				default: ''
			},
			describe: {
				type: String,
				default: ''
			},
			price: {
				type: [Number, String],
				default: ''
			},
			is_next_day_delivery: {
				type: [Number, String],
				default: ''
			},
			type: {
				type: String,
				default: ''
			},
			number: {
				type: Number,
				default: 0
			}
		},
		computed: {},
		created() {},
		methods: {
			click() {
				this.$emit('click');
			}
		}
	};
</script>

<style lang="scss">
	.goods-box {
		position: relative;

		.goods-img {
			height: 180rpx;
			width: 180rpx;
			background-color: #ccc;
			margin-right: 25rpx;
		}

		.goods__tag {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 5;

			.tag-img {
				width: 60rpx;
				height: 30rpx;
			}
		}
		
		.goods__next {
			position: absolute;
			top: 0;
			right: 0;
			z-index: 5;
		
			.next-img {
				width: 60rpx;
				height: 30rpx;
			}
		}

		.goods-title {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			width: 450rpx;
			line-height: 40rpx;
			margin-bottom: 6rpx;
		}

		.describe-text {
			font-size: 24rpx;
			color: rgba(153, 153, 153, 1);
		}

		.price {
			color: $t-mainColor;
			font-weight: 600;

			&::before {
				content: '￥';
				font-size: 24rpx;
			}
		}
	}
</style>